
// 调用 Vue 构造函数
new Vue({
  el: "#root",
  // 数据
  data() {
    return {
      navList: [
        {
          content: '全部',
          key: 'all',
          type: 'primary'
        },
        {
          content: '在线',
          key: 'success',
          type: 'success'
        },
        {
          content: '离线',
          key: 'error',
          type: 'danger'
        },
      ],
      olderData: [],
      tableData: [],
      value: '',
      dialogVisible: false,
      // 代表当前编辑的值
      current: {
        name: ''
      },
      status: '',
      options: [
        {
          label: '在线',
          value: 'success'
        },
        {
          label: '离线',
          value: 'error'
        },
      ]
    }
  },
  created () {
    // fetch 发送一个请求，也可以获取本地的json文件
    // ajax 一项技术，能让网页不用刷新就可以获取数据
    // axios
    fetch("./data.json")
    .then(res => res.json()).then(res => {
      // console.log(res)
      // { personList: [...] }
      // const res = {
      //   personList: []
      // }
      const { personList } = res;
      // es6 扩展运算符 ...
      this.tableData = [...personList];
      this.olderData = [...personList];
      /**
       * older 用来保存两种状态的数据 add delete
       * success tabledata = [...]
       */
    })
    // Promise then
    // return Promise then(res => {})
  },
  methods: {
    // 新增一条数据
    addData () {
      if(!(this.value.length && this.status)) {
        this.$message({
          message: '请输入姓名或者选中状态',
          type: "warning"
        })
        return
      }
      // let id = 0;
      // this.tableData.forEach(item => {
      //   if(Number(item.id) > id) {
      //     id = Number(item.id)
      //   }
      // })
      // id = id + 1;
      const person = {
        id: this.tableData.length + '',
        name: this.value,
        type: this.status
      }
      this.tableData.push(person);
      this.olderData.push(person);
      // 清空输入框的值
      this.value = ''
      // 清空下拉框的值
      this.status = ''
    },
    // 删除数据
    delData (id) {
      // 通过这个参数id去获取对应的下标，然后删除
      // find 返回元素本身 { ... }
      // indexOf()
      // map
      // 封装
      const table_index = this.tableData.map(item => item.id).indexOf(id);
      const older_index = this.olderData.map(item => item.id).indexOf(id);
      /**
       *  tableData = [小花，杨幂]
       *  olderData  = [小明, 小花，杨幂]
       */
      // 删除数组中指定的元素 splice
      this.tableData.splice(table_index, 1);
      this.olderData.splice(older_index, 1);
      this.$message({
        type: 'success',
        message: '删除成功'
      })
    },
    // 修改数据
    editData (id) {
      // 通过这个参数id去获取对应的数据，然后更新
      // find
      const value = this.tableData.find(item => item.id === id);
      // 深拷贝一份
      this.current = JSON.parse(JSON.stringify(value));
      // 打开弹窗
      this.dialogVisible = true;
    },
    // 查询数据
    filterData (type="all") {
      // type 为 all 查询全部数据
      // type 为 success 查询在线的数据
      // type 为 error 查询离线的数据
      // success || error
      // filter
      switch(type) {
        case 'all':
          this.tableData = this.olderData.filter(item => item.type === 'success' || item.type === 'error');
          break;
        case 'success':
          this.tableData = this.olderData.filter(item => item.type === 'success');
          break;
        case 'error':
          this.tableData = this.olderData.filter(item => item.type === 'error');
          break;
      }
    },
    submit () {
      // this.current.id 对应 this.tableData[], index
      const id = this.current.id;
      const table_index = this.tableData.map(item => item.id).indexOf(id);
      const older_index = this.tableData.map(item => item.id).indexOf(id);
      // 替换
      this.tableData.splice(table_index,1, this.current);
      this.olderData.splice(older_index,1, this.current);
      // 关闭弹窗
      this.dialogVisible = false;
    }
  }
});